<template>
  <div class="home-page">

    <div class="content-box">
      <div class="content-header">
        <tool-bar v-if="isLoad" @clickControl="clickControl"></tool-bar>
      </div>

      <div class="content-body">
        <div class="body-left">
          <left-sub v-if="isLoad"></left-sub>
        </div>

        <div class="body-right">
          <right-sub ref="rightEle" @mapIsLoad="mapIsLoad"></right-sub>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerSub from '@/components/layoutSubassemb/headerSub.vue';
import leftSub from '@/components/layoutSubassemb/leftSub.vue';
import rightSub from '@/components/layoutSubassemb/rightSub.vue';
import toolBar from '@/components/toolBar/index.vue';
export default {
  components: { headerSub, leftSub, rightSub, toolBar },

  data () {
    return {
      isLoad: false
    };
  },

  methods: {
    mapIsLoad (state) {
      this.isLoad = state;
    },

    clickControl (option) {
      const { name, isCheck } = option;
      switch (name) {
        case '双屏对比':
          this.eventBus.$emit('openSplitScreen', isCheck);
          break;

        default:
          break;
      }
    }
  }
}
</script>

<style lang="less" scoped>
.home-page {
  width: 100%;
  height: 100%;

  .header-sub {
    width: 100%;
    height: 48px;
  }

  .content-box {
    width: 100%;
    height: calc(100%);

    .content-header {
      width: 100%;
      height: 94px;
      background-color: #333333;
      box-sizing: border-box;
      z-index: 10;
      pointer-events: all;
    }

    .content-body {
      display: flex;
      align-items: center;
      width: 100%;
      height: calc(100% - 94px);

      .body-left {
        width: 306px;
        height: 100%;
        z-index: 11;
        pointer-events: all;
      }

      .body-right {
        width: calc(100% - 306px);
        height: 100%;
      }
    }
  }
}
</style>